<template>
	<view class="meDetail">
		<!-- 导航 -->
		<u-navbar back-text="余额明细" :back-text-style="textStyle" back-icon-color="#000000"
			style="font-weight: bold;font-family: PingFang SC;"></u-navbar>
		<!-- end -->
		<view style="width:92%;margin: 0 auto;margin-top: 10rpx;">
			<!-- 头部开始 -->
			<view style="width: 100%;">
				<view style="display: flex;justify-content: space-between;width: 100%;padding:26rpx 0  10rpx 0;">
					<view style="display: flex;align-items: center;justify-content: center;">
						<view>
							<image style="width: 100rpx;height: 100rpx;border-radius: 50%;" :src="monthOrderInfo.portrait"></image>
						</view>
						<view style="color: #3F3F3F;margin-left: 18rpx;font-size: 26rpx;">
							<view style="line-height: 48rpx;font-size: 30rpx;">{{monthOrderInfo.nickname}}</view>
							<image style="width: 60rpx;height: 30rpx;margin-left: 2rpx;"
								src="https://beedao.oss-cn-beijing.aliyuncs.com/9cd66885faab4b55af375ad7ad2211d7.png">
							</image>
						</view>
					</view>
					<view style="display: flex;justify-content: center;align-items: center;">
						<view
							@click="goOpen"
							style="padding: 12rpx 40rpx;background: #3A3D57;border-radius: 40rpx;color: #FFFFFF;font-weight: 400;">
							续费
						</view>
					</view>
				</view>
			</view>
			<!-- 头部开始结束 -->
			<!-- 余额相关 -->
			<view style="width: 100%;">
				<view style="color: #4E4E4E;line-height: 42rpx;font-weight: bold;text-align: center;font-size: 32rpx;">{{userInfoVO.money?userInfoVO.money:0}}</view>
				<view style="color: #A8A8A8;line-height: 90rpx;text-align: center;">总余额</view>
				<view style="padding: 20rpx 10rpx; width: 100%;border-radius: 16rpx;box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.06);background: #FFFFFF;height: 700rpx;">
					<view style="width: 100%;margin: 0 auto;display: flex;font-size: 26rpx;">
						<view
						:class="selectId == '0' ? 'choose_1' : 'choose_2'"
						@click="selectProduct(0)"
						style="width: 130rpx;text-align: center;line-height: 50rpx;border-radius: 40rpx;margin: 15rpx 20rpx;">
							全部
						</view>
						<view
						:class="selectId == '1' ? 'choose_1' : 'choose_2'"
						@click="selectProduct(1)"
						 style="width: 130rpx;text-align: center;line-height: 50rpx;border-radius: 40rpx;margin: 15rpx 20rpx;">
							赠送
						</view>
						<view
						:class="selectId == '3' ? 'choose_1' : 'choose_2'"
						@click="selectProduct(3)"
						 style="width: 130rpx;text-align: center;line-height: 50rpx;border-radius: 40rpx;margin: 15rpx 20rpx;">
							消费
						</view>
						<view
						:class="selectId == '4' ? 'choose_1' : 'choose_2'"
						@click="selectProduct(4)"
						 style="width: 130rpx;text-align: center;line-height: 50rpx;border-radius: 40rpx;margin: 15rpx 20rpx;">
							退款
						</view>
					</view>
					<view style="width: 96%;margin: 0 auto;">
						<scroll-view style="white-space: nowrap;display: flex;height: 580rpx;"
						lower-threshold="10" @scrolltolower="scrolltolower" scroll-y="true" class="scroll-Y">
							<view v-if="detailList.length > 0" v-for="(ite,uid) in detailList" :key="uid" style="border-bottom: 1rpx solid #E9E9E9;width: 100%;padding-top: 10rpx;">
								<view style="width: 90%;margin: 0 auto;display: flex;justify-content: space-between;margin-bottom: 20rpx;">
									<view>
										<view style="line-height: 50rpx;color: #4E4E4E;">
											<text v-if="ite.createType == 1">赠送</text>
											<text v-if="ite.createType == 3">消费</text>
											<text v-if="ite.createType == 4">退款</text>
										</view>
										<view style="line-height: 40rpx;color: #A1A1A1;font-size: 24rpx;">{{ite.createTime}}</view>
									</view>
									<view style="display: flex; justify-content: center; align-items: center;">
										<view style="line-height: 40rpx;">
											{{ite.actionType == 2?"-":"+"}}{{ite.money}}
										</view>
									</view>
								</view>
							</view>
							<view style="width: 100%;height: 540rpx;" v-if="detailList.length == 0">
								<view style="display: flex;align-items: center;justify-content: center;padding-top: 30rpx;">
									<image style="height: 300rpx;" src="https://beedao.oss-cn-beijing.aliyuncs.com/586bbc0765f24a608d139a43554b3948.png" mode="heightFix"></image>
								</view>
								<view style="text-align: center;color: #BABABA;">暂无消费明细~</view>
							</view>
						</scroll-view>
					</view>
				</view>
				
			</view>
			<!-- 余额相关结束 -->
			<!-- 红包相关 -->
			<view v-if="memberCouponsList.length > 0">
				<view style="width: 100%;display: flex;padding:30rpx 0 ;">
					<view style="line-height: 30rpx;font-size: 30rpx;">会员专属红包</view>
					<image style="width: 60rpx;height: 30rpx;margin-left: 12rpx;"
						src="https://beedao.oss-cn-beijing.aliyuncs.com/9cd66885faab4b55af375ad7ad2211d7.png">
					</image>
				</view>
				<view style="margin-bottom: 30rpx;">
					<view v-for="(menmber,tid) in memberCouponsList" style="display: flex;justify-content: space-between;">
						<view style="display: flex;">
							<view>
								<image style="width: 140rpx;height: 140rpx;" 
								:src="menmber.expires == '0' ? isuse.noImg : isuse.isImg" mode="">
								</image>
							</view>
							<view v-if="menmber.expires == '1'" style="margin-left: 15rpx;opacity: 0.65;">
								<view style="line-height: 42rpx;">会员专属红包</view>
								<view style="line-height: 42rpx;color: #A1A1A1;">红包已过期</view>
								<view style="line-height: 40rpx;margin-top: 20rpx;color: #A1A1A1;">{{menmber.endDatetime}}</view>
							</view>
							<view v-else style="margin-left: 15rpx;">
								<view style="line-height: 50rpx;margin-top: 20rpx;font-size: 30rpx;">会员专属红包</view>
								<view style="line-height: 50rpx;color: #A1A1A1;font-size: 27rpx;">红包将于{{menmber.endDatetime}}过期</view>
							</view>
						</view>
						<view v-if="menmber.expires == '1'" style="display: flex;align-items: center;justify-content: center;opacity: 0.65;">
							<view style="padding: 12rpx 19rpx;background-color: #3A3D57;color: #ffffff;border-radius: 30rpx;font-size: 26rpx;">已过期</view>
						</view>
						<view v-else @click="goPayOrder(menmber.businessId)" style="display: flex;align-items: center;justify-content: center;">
							<view style="padding: 12rpx 19rpx;background-color: #3A3D57;color: #ffffff;border-radius: 30rpx;font-size: 26rpx;">去使用</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 红包相关结束 -->
			<!-- 续费或开通 -->
			<u-popup mode="bottom" v-model="showOpen">
				<scroll-view style="white-space: nowrap;display: flex;height: 500rpx;position: relative;" 
				lower-threshold="10" scroll-y="true" class="scroll-Y">
					<view style="width: 92%;margin: 0 auto; padding-top: 12rpx;display: flex;justify-content: space-between;" @click="showOpen = false">
						<view style="display: flex;padding:30rpx 0 ;">
							<view style="line-height: 30rpx;font-size: 30rpx;">{{isMember == 1?"会员续费":"开通会员"}}</view>
							<image style="width: 60rpx;height: 30rpx;margin-left: 12rpx;"
								src="https://beedao.oss-cn-beijing.aliyuncs.com/9cd66885faab4b55af375ad7ad2211d7.png">
							</image>
						</view>
						<view style="display: flex; justify-content: center; align-items: center;">
							<image
								style="width: 36rpx;height: 36rpx;"
								src="https://beedao.oss-cn-beijing.aliyuncs.com/b7e475bcf2644c399e8897f9c788bc69.png"
								mode=""
							></image>
						</view>
						
					</view>
					<view style="width: 92%;display: flex;margin: 20rpx auto;">
						<view
						:class="items.memberConfigId == topUp ? 'choose_3' : 'choose_4'"
						@click="selectTopUp(items)"
						style="width: 30%;padding: 20rpx 10rpx;margin: 0 10rpx;border-radius: 10rpx;" v-for="(items,tid) in product" :key="tid">
								<view style="width: 100%;text-align: center;font-size: 30rpx;">{{items.dayNum}}{{isMember == 1?"天加油包":"天会员"}}</view>
								<view style="width: 100%;text-align: center;line-height: 60rpx;font-weight: bold;font-size: 32rpx;">{{items.price?items.price:0}}元</view>
								<view style="width: 100%;text-align: center;color: #EE0C00;font-size: 28rpx;">送{{items.presentMoney?items.presentMoney:0}}元</view>
							</view>
						</view>
						<view style="width: 100%;position: absolute;bottom: 0;padding: 10rpx 0 15rpx 0;left: 0;" @click="isClick==false?goPay():''">
							<view style="font-size: 32rpx;width: 92%;background-color: #3A3D57;border-radius: 60rpx;margin: 0 auto;line-height: 90rpx;text-align: center;color:#FFFFFF ;">
								{{isMember == 1?"立即续费":"立即开通"}}
							</view>
						</view>
					
				</scroll-view>
			</u-popup>
			<!-- 续费或开通结束 -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isClick:false,//防止重复支付
				showOpen:false,//打开续费
				isMember:1,//会员状态
				product:[],//规格数组
				topUp:"",//选中的规格
				isuse:{
					isImg:"https://beedao.oss-cn-beijing.aliyuncs.com/cf61fbdb70e0476895feb50357da9445.png",
					noImg:"https://beedao.oss-cn-beijing.aliyuncs.com/dff084b3e0b940a7b2581e1cb7b66627.png"
				},//是否使用
				monthOrderInfo:{},//用户信息
				userInfoVO:{},
				selectId:"0",//选中全部
				form:{
					page:1,
					pageSize: 10,
				},
				countPage:0,
				detailList:[],//明细数组
				memberCouponsList:[],//已领取的会员优惠券
			};
		},
		onLoad() {
			var that = this;
			// 获取会员开通数组
			that.getUserInfo();//用户信息
			that.getMemberList();//全部规格
			that.getDetail();//全部明细
			that.getMemberCouponsList();//获取优惠券数组列表
		},
		onShow() {},
		methods: {
			//支付
			goPay(){
				var _this=this
				_this.isClick=true;
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'member-order/commit'
				};
				let data = {
					configId:_this.topUp
				};
				_this.http.httpTokenRequest(opts, data).then(res => {
					if (res.code == 200) {
						var needstr = res.data;
						_this.wxpay(needstr.vxPayData, needstr.orderId);	
					} else {
						_this.isClick=false;
						uni.showToast({
							title: res.message,
							mask: true,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			wxpay(str, orderId) {
				let _this = this;
				let query = str;
				uni.requestPayment({
					provider: 'wxpay',
					appId: query.appId,
					timeStamp: query.timeStamp + '',
					nonceStr: query.nonceStr,
					package: query.package,
					signType: query.signType,
					paySign: query.sign,
					success: res => {
						_this.isClick=false;
						_this.showOpen = false;
						_this.getUserInfo();//用户信息
						_this.getDetail();//全部明细
						uni.showToast({
							title: "支付成功",
							mask: true,
							icon: 'none',
							duration: 2000
						});	
					},
					fail: val => {
						_this.isClick=false;
						_this.showOpen = false;
						uni.showToast({
							title: "支付失败",
							mask: true,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			//获取优惠券数组列表
			getMemberCouponsList(){
				var _this = this;
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'coupon/memberCouponsList'
				};
				let data = {}; 
				_this.http.httpTokenRequest(opts, data).then(res => {
					if (res.code == "200") {					
						
						var arr=res.data;
						if(arr.length > 0){
							arr.forEach((item)=>{
								item.endDatetime=item.endDatetime.substring(0, 10);
							})
							_this.memberCouponsList=arr;
						}else{
							_this.memberCouponsList=[];
						}
					}
				});
			},
			// 获取会员开通数组
			getMemberList(){
				var _this = this;
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'member-order/config'
				};
				let data = {}; 
				_this.http.httpTokenRequest(opts, data).then(res => {
					if (res.code == "200") {					
						_this.product=res.data
						_this.topUp=this.product[0].memberConfigId;
					}
				});
			},
			//去下单页面
			goPayOrder(businessId){
				uni.navigateTo({
					url: '/pageageA/placeOrder/selectService?businessId=' + businessId
				});
			},
			//获取明细
			getDetail(){
				var _this = this;
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'member-order/money/page'
				};
				let data = {
					createType:this.selectId,
					page: this.form.page,
					pageSize: this.form.pageSize
				};
				this.http.httpTokenRequest(opts, data).then(res => {
					if(res.code == "200"){
						if(this.form.page == "1"){
							_this.detailList=res.data.records;
						}else{
							_this.detailList=[..._this.detailList,...res.data.records];
						}
						
						_this.countPage=res.data.pages;
					}
				});
			},
			// 打开开通或续费会员
			goOpen(){
				this.topUp=this.product[0].memberConfigId;
				this.showOpen=true;
			},
			// 充值选中
			selectTopUp(item){
				this.topUp=item.memberConfigId;
			},
			// 触底事件
			scrolltolower(){
				if (this.form.page < this.countPage) {
					this.form.page = this.form.page + 1;
					this.getDetail();
				}
			},
			// 选中查询条件
			selectProduct(item){

				this.selectId=item;
				this.form.page=1;
				this.getDetail();
			},
			// 用户信息
			getUserInfo() {
				var _this = this;
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'user/info'
				};
				let data = {}; 
				_this.http.httpTokenRequest(opts, data).then(res => {
					if (res.code == "200") {
						var userInfo = JSON.parse(uni.getStorageSync('userinfo'));
						_this.monthOrderInfo = userInfo;
						_this.userInfoVO= res.data.userInfoVO;
					}
				});
			},
		}
	};
</script>

<style scoped lang="scss">
.choose_1{
	border: 1rpx solid #3A3D57;
	background-color:#3A3D57;
	color: #ffffff;
}
.choose_2{
	border: 1rpx solid  #D9D9D9;
	background-color:#FFFFFF;
	color: #4E4E4E;
}
.choose_3{
	border: 1rpx solid #FFAC58;
	background-color:#FFE0C1 ;
}
.choose_4{
	border: 1rpx solid #FFF3E7;
	background-color:#FFF3E7 ;
}
</style>
